import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image, OfficialAccount } from '@tarojs/components'
import CImage from '../../components/CImage/index'

import CTopbar from '../../components/CTopBar/index'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'
import Live_no_search from '@/assets/Live_no_search.png'
import { get_live_list_api } from './service'

/**
 * 婚姻家庭界面
 */
interface ILiveData {
  broadcastImg: string
  broadcastLink: string
  broadcastName: string
}
interface IData {
  live_data: any
  pageSize: number
  pageNum: number
  total: number
}

interface Live {
  state: IData
}

class Live extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      live_data: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
    }
  }

  componentDidMount() {
    this.get_live_list()
  }

  goto_live_details() {
    // Taro.navigateTo({
    //   url: '/pages/Live/LiveDetails/index',
    // })
    Taro.navigateToMiniProgram({
      appId: 'wx83d57535f03f5cac',
      // envVersion: 'develop',  //版本
      // extraData: {
      //   openId: '123', //需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
      // },
      success(res) {
        // 打开其他小程序成功同步触发
        console.log(res)
      },
      complete(res) {
        console.log(res)
      },
    })
  }

  get_live_list() {
    const { pageNum, pageSize } = this.state
    const params = {
      pageNum,
      pageSize,
    }
    get_live_list_api(params).then(({ result, data }) => {
      if (result === 1999) {
        this.setState({
          live_data: data,
        })
      }
    })
  }

  render() {
    const { live_data } = this.state

    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='直播'></CTopbar>
        </View>
        <View className='live'>
          {live_data.length === 0 ? (
            <View className='live_no_search'>
              <Image src={Live_no_search} mode='widthFix' />
            </View>
          ) : (
            live_data.map((current, index) => {
              return (
                <View key={index} className='wrapper' onClick={this.goto_live_details.bind(this)}>
                  <View>
                    <CImage src={current.broadcastImg}></CImage>
                  </View>
                  <View className='title'>{current.broadcastName}</View>
                  <View>
                    <Button className='btn'>{'直播中'}</Button>
                  </View>
                </View>
              )
            })
          )}
        </View>
      </View>
    )
  }
}

export default Live
